<template>
  <div>
    <van-nav-bar
      :title="companyInfo.name"
      left-text="返回"
      right-text="首页"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <div>
      <img :src="companyInfo.logo" class="front_img"/>
    </div>

    <van-tabs >
      <van-tab title="公司首页">
        <div  class="qybg">
          <div style="text-indent: 2em;">
            <p v-html="companyInfo.introduction" class="textcss">

            </p>
          </div>

        </div>
        <!--<div class="qybg">
          <div class="qytitle">产品展示</div>
        </div>-->
        <div class="qybg" v-if="companyInfo.imageList.length > 0 ">
          <div  class="qytitle" >
            资质认证
          </div>
          <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="item in companyInfo.imageList" :key="item.imageId" style="height: 250px">
              <img :src="item.url" class="zz_img"/>
            </van-swipe-item>
          </van-swipe>
        </div>
        <div class="qybg">
          <div style="margin-bottom: 10px"  class="qytitle">
            招商联系方式
          </div>
          <div>
            <van-cell-group>
              <van-cell title="招商联系人" :value="companyInfo.contacts" icon="manager-o" />
              <van-cell title="联系电话" :value="companyInfo.contactsPhone" icon="phone-o" @click="toPhone(companyInfo.contactsPhone)"/>
              <van-cell title="微信" :value="companyInfo.contactsWechat"  icon="chat-o"/>
            </van-cell-group>
          </div>
        </div>
        <div class="qybg">
          <div style="margin-bottom: 10px"  class="qytitle">
            公司信息
          </div>
          <div>
            <van-cell-group>
              <van-cell title="名称" center :value="companyInfo.name"  icon="wap-home-o" />
              <van-cell title="地址" center :value="companyInfo.provinceName+companyInfo.cityName+companyInfo.countyName+companyInfo.address"  icon="location-o" />
              <van-cell title="电话" :value="companyInfo.phone" icon="phone-o" @click="toPhone(companyInfo.phone)"/>
              <van-cell title="官网" :value="companyInfo.website" icon="desktop-o"/>
            </van-cell-group>
          </div>
        </div>
      </van-tab>
      <van-tab title="招商产品">
        <div class="cpbg">
          <div class="flbg">
            <van-sidebar v-model="activeKey" @change="onChangeSidebar">
              <van-sidebar-item :title="item.name" v-for="item in productCategory" :key="item.categoryId"/>
            </van-sidebar>
          </div>
          <div class="cpitem">
            <div class="pbg" v-for="item in productList" :key="item.productId"  @click="toProductInfo(item.productId)">
              <img :src="item.image1" class="pimg"/>
              <div class="pname">{{item.name}}</div>
            </div>
          </div>
        </div>

      </van-tab>
      <van-tab title="政策支持">
        <div  class="qybg" v-if="companyInfo.policySupport">
          <div style="text-indent: 2em;">
            <p v-html="companyInfo.policySupport" class="textcss">

            </p>
          </div>
        </div>

      </van-tab>
    </van-tabs>

    <div class="vx"/>
    <div class="btbg">
      <van-button type="danger" block round @click="onShowMessage">代理咨询</van-button>
    </div>

    <van-popup v-model="showMessage" position="bottom" :style="{ height: '70%' }" >
      <div style="text-align: center;padding:10px;font-size: 18px">代理咨询</div>
      <van-form @submit="saveAgencyChat">
        <van-field
          v-model="form.name"
          name="姓名"
          label="姓名"
          required
          placeholder="您的姓名"
          :rules="[{ required: false, message: '请填写姓名' }]"
        />
        <van-field
          v-model="form.phone"
          name="电话"
          required
          label="电话"
          placeholder="您的电话"
          :rules="[{ required: true, message: '请填写电话' }]"
        />
        <van-field
          v-model="form.wechat"
          name="微信"
          label="微信"
          placeholder="您的微信号码"
          :rules="[{ required: false, message: '请填写微信' }]"
        />
        <van-field
          readonly
          clickable
          name="area"
          :value="form.dlqy"
          label="代理区域"
          placeholder="点击选择省市区"
          @click="showArea = true"
        />
        <van-popup v-model="showArea" position="bottom">
          <van-area
            :area-list="areaList"
            @cancel="showArea = false"
            @confirm="onConfirmArea"
          />
        </van-popup>
        <van-field name="agencyType" label="您是" >
          <template #input>
            <van-radio-group v-model="form.agencyType" direction="vertical">
              <div style="padding-top: 10px;">
                <van-radio name="1">代理商</van-radio>
              </div>
              <div style="padding-top: 10px;">
                <van-radio name="2">商超流通</van-radio>
              </div>
              <div style="padding-top: 10px;">
                <van-radio name="3">酒饭店</van-radio>
              </div>
            </van-radio-group>
          </template>
        </van-field>
        <van-field name="pushOtherCompany" label="推送同类厂家" >
          <template #input>
            <van-radio-group v-model="form.pushOtherCompany" direction="horizontal">
              <div style="padding-left: 20px;">
                <van-radio name="1">是</van-radio>
              </div>
              <div style="padding-left: 20px;">
                <van-radio name="0">否</van-radio>
              </div>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
          v-model="form.message"
          rows="4"
          autosize
          label="留言"
          type="textarea"
          maxlength="100"
          placeholder="请输入留言"
          show-word-limit
        />
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">
            提交
          </van-button>
        </div>
      </van-form>
    </van-popup>
  </div>
</template>

<script>
import { getCompanyInfo, queryProductCategory, queryProductInfo, saveAgencyChat } from '../../api/api'
import AreaList from '../../../static/area'
import { Dialog } from 'vant'
import { Toast } from 'vant'
export default {
  name: 'Company',
  data() {
    return {
      companyInfo: {},
      companyId: null,
      showMessage: false,
      showArea: false,
      form: {
        agencyType: '1',
        pushOtherCompany: '1'
      },
      areaList: AreaList,
      activeKey: 0,
      productCategory: [],
      productList: [],
      agencyId: null
    }
  },
  created() {
    const agencyId = this.$route.query.agencyId
    this.agencyId = agencyId
    this.getData()
  },
  methods: {
    getData() {
      this.companyId = this.$route.query.companyId
      this.getCompanyInfo()
      this.queryProductCategory()
    },
    getCompanyInfo() {
      const param = { companyId: this.companyId }
      getCompanyInfo(param).then(response => {
        response.data.provinceName = response.data.provinceName ? response.data.provinceName : ''
        response.data.cityName = response.data.cityName ? response.data.cityName : ''
        response.data.countyName = response.data.countyName ? response.data.countyName : ''
        response.data.address = response.data.address ? response.data.address : ''
        this.companyInfo = response.data
      })
    },
    queryProductCategory() {
      const param = { companyId: this.companyId }
      queryProductCategory(param).then(response => {
        this.productCategory = response.data
        if (response.data.length > 0) {
          this.queryProductInfo(response.data[0].categoryId)
        }
      })
    },
    queryProductInfo(category) {
      const param = { companyId: this.companyId, category: category }
      queryProductInfo(param).then(response => {
        this.productList = response.data
      })
    },
    onClickLeft() {
      this.$router.go(-1) // 返回上一层
    },

    onClickRight() {
      this.$router.push({ path: '/home', query: { agencyId: this.agencyId }})
    },

    onShowMessage() {
      this.showMessage = true
      // this.$router.push({ path: '/chat', query: { companyId: this.companyId }})
    },
    onConfirmArea(values) {
      this.form.province = values[0].name
      this.form.city = values[1].name
      this.form.county = values[2].name

      const dlqy = values
        .filter((item) => !!item)
        .map((item) => item.name)
        .join('/')
      this.form.dlqy = dlqy
      this.showArea = false
    },
    toPhone(phone) {
      window.location.href = 'tel://' + phone
    },
    saveAgencyChat() {
      const agencyId = this.$store.getters.agencyId
      const param = { ...this.form, companyId: this.companyId, agencyId: agencyId }
      saveAgencyChat(param).then(response => {
        console.log(response)
        if (response.code === 200) {
          this.showMessage = false
          Dialog.alert({
            title: '',
            message: '提交成功'
          }).then(() => {
            // on close
          })
        } else {
          Toast.fail(response.msg)
        }
      })
    },
    onChangeSidebar(index) {
      this.queryProductInfo(this.productCategory[index].categoryId)
    },
    toProductInfo(productId) {
      this.$router.push({ path: '/product', query: { companyId: this.companyId, productId: productId }})
    }
  }
  /* beforeRouteEnter(to, form, next) {
    debugger
    if (form.name === 'Product') {
      to.meta.isBack = true
    }
    next()
  },
  activated() {
    debugger
    console.log('activated',this.$route.meta.isBack)
    if (!this.$route.meta.isBack) {
      this.getData()
    }
    this.$route.meta.isBack = false
  }*/
}
</script>

<style scoped>
  .front_img{
    width: 100%;
    height: 150px;
  }
  .btbg{
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 999;
    padding: 5px 16px;
    background-color: #fff;
  }
  .qybg{
    width: 100%;
    background-color: #ffffff;
    padding:5px;
    margin-top: 5px;
    box-sizing:border-box;
  }
  .zz_img{
    width: auto;
    height: 250px;
  }
  .vx{
    height: 80px;
  }
  .qytitle{
    font-size: 16px;
    padding-left: 10px;
    font-weight: bold;
  }
  .cpbg{
    display: flex;
    padding:5px;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .cpitem{
    background-color: #ffffff;
    display: flex;
    flex:1;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .van-card{
    background-color: #ffffff;
  }
  .pbg{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding:10px;
    flex:1
  }
  .pimg{
    height: 80px;
    width: 80px;
  }
  .pname{
    font-size: 18px;
    color: #333333;
    margin-left: 10px;
  }

  .textcss{
    font-size: 14px;
  }
</style>
